﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	BarChart
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>BarChart</h2>
    <input type="radio" title="List" checked="checked" name="List" value="List" />List
    <input type="radio" title="Graph" name="List" value="Graph" />Graph
    <div id="list" style="width: 800px; height: 400px; margin: 0 auto">
    		<table border="1" id="datatable">
			<thead>
				<tr>
                    <th class="tabletext">组织单元</th>
					<th class="tabletext">时间</th>
					<th class="tabletext kpi">作业组总数</th>
					<th class="tabletext kpi">作业组按时完成数</th>
                    <th class="tabletext kpi">作业组延时完成数</th>
                    <th class="tabletext kpi">作业组按时完成率</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th rowspan="3" class="tabletext series">车间一</th>
					<th class="tabletext xAxis">2011年1月</th>
					<td class="tabletext 车间一_2011年1月_作业组总数">12</td>
                    <td class="tabletext 车间一_2011年1月_作业组按时完成数">10</td>
                    <td class="tabletext 车间一_2011年1月_作业组延时完成数">2</td>
                    <td class="tabletext 车间一_2011年1月_作业组按时完成率">83.33%</td>
				</tr>
                <tr>					
					<th class="tabletext xAxis">2011年2月</th>
					<td class="tabletext 车间一_2011年2月_作业组总数">12</td>
                    <td class="tabletext 车间一_2011年2月_作业组按时完成数">9</td>
                    <td class="tabletext 车间一_2011年2月_作业组延时完成数">3</td>
                    <td class="tabletext 车间一_2011年2月_作业组按时完成率">75%</td>
				</tr>
                <tr>					
					<th class="tabletext xAxis">2011年3月</th>
					<td class="tabletext 车间一_2011年3月_作业组总数">12</td>
                    <td class="tabletext 车间一_2011年3月_作业组按时完成数">11</td>
                    <td class="tabletext 车间一_2011年3月_作业组延时完成数">1</td>
                    <td class="tabletext 车间一_2011年3月_作业组按时完成率">91.67%</td>
				</tr>
                <tr>
					<th rowspan="3" class="tabletext series">车间二</th>
					<th class="tabletext">2011年1月</th>
					<td class="tabletext 车间二_2011年1月_作业组总数">12</td>
                    <td class="tabletext 车间二_2011年1月_作业组按时完成数">11</td>
                    <td class="tabletext 车间二_2011年1月_作业组延时完成数">1</td>
                    <td class="tabletext 车间二_2011年1月_作业组按时完成率">91.67%</td>
				</tr>
                <tr>					
					<th class="tabletext">2011年2月</th>
					<td class="tabletext 车间二_2011年2月_作业组总数">12</td>
                    <td class="tabletext 车间二_2011年2月_作业组按时完成数">12</td>
                    <td class="tabletext 车间二_2011年2月_作业组延时完成数">0</td>
                    <td class="tabletext 车间二_2011年2月_作业组按时完成率">100%</td>
				</tr>
                <tr>					
					<th class="tabletext">2011年3月</th>
					<td class="tabletext 车间二_2011年3月_作业组总数">12</td>
                    <td class="tabletext 车间二_2011年3月_作业组按时完成数">10</td>
                    <td class="tabletext 车间二_2011年3月_作业组延时完成数">1</td>
                    <td class="tabletext 车间二_2011年3月_作业组按时完成率">83.33%</td>
				</tr>
                <tr>
					<th rowspan="3" class="tabletext series">车间三</th>
					<th class="tabletext">2011年1月</th>
					<td class="tabletext 车间三_2011年1月_作业组总数">12</td>
                    <td class="tabletext 车间三_2011年1月_作业组按时完成数">5</td>
                    <td class="tabletext 车间三_2011年1月_作业组延时完成数">7</td>
                    <td class="tabletext 车间三_2011年1月_作业组按时完成率">41.67%</td>
				</tr>
                <tr>					
					<th class="tabletext">2011年2月</th>
					<td class="tabletext 车间三_2011年2月_作业组总数">12</td>
                    <td class="tabletext 车间三_2011年2月_作业组按时完成数">8</td>
                    <td class="tabletext 车间三_2011年2月_作业组延时完成数">4</td>
                    <td class="tabletext 车间三_2011年2月_作业组按时完成率">66.67%</td>
				</tr>
                <tr>					
					<th class="tabletext">2011年3月</th>
					<td class="tabletext 车间三_2011年3月_作业组总数">12</td>
                    <td class="tabletext 车间三_2011年3月_作业组按时完成数">6</td>
                    <td class="tabletext 车间三_2011年3月_作业组延时完成数">6</td>
                    <td class="tabletext 车间三_2011年3月_作业组按时完成率">50%</td>
				</tr>
            </tbody>
		</table>
    </div>
    <div id="graph">
        <div>
            可选KPI：<select id="allkpi" name="allkpi" style='width: 200px;'></select></div>
        <div id="bargraph" style="width: 800px; height: 400px; margin: 0 auto">
        </div>
    </div>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        .tabletext
        {
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="../../Scripts/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="../../Scripts/highcharts.src.js"></script>
    <script type="text/javascript" src="../../Highcharts-2.1.4/js/themes/grid.js"></script>
    <script type="text/javascript">

        var seriesCount = 0;
        var unit = "";

        function AddAllKPI() {
            var options = "";
            $('.kpi').each(function () {
                options = options + "<option value='" + this.innerHTML + "'>" + this.innerHTML + "</option>";
            });
            $('#allkpi').append(options);
        }

        $(document).ready(function () {

            $('#allkpi').change(function () {
                var table = $("#datatable");
                Highcharts.visualize(table[0], options, this.value);
            });

            $(":radio").click(function () {
                if (this.value == "List") {
                    $("#graph").hide();
                    $("#list").show();
                }
                else if (this.value == "Graph") {
                    $("#list").hide();
                    $("#graph").show();
                }
            });

            // 显示图形
            Highcharts.visualize = function (table, options, kpi) {

                options.title.text = kpi;

                // the categories
                options.xAxis.categories = [];
                $('.xAxis', table).each(function (i) {
                    options.xAxis.categories.push(this.innerHTML);
                });

                // the series and data
                options.series = [];
                seriesCount = 0;
                unit = "";
                var maxValue = 0;
                $('.series', table).each(function (i) {

                    var series = {
                        name: this.innerHTML,
                        data: [],
                        dataLabels: {
                            enabled: true,
                            rotation: -90,
                            color: '#FFFFFF',
                            align: 'right',
                            x: -4,
                            y: 10,
                            formatter: function () {
                                return this.y + unit;
                            },
                            style: {
                                font: 'normal 12px Verdana, sans-serif'
                            }
                        }

                    };
                    for (var i = 0; i < options.xAxis.categories.length; i++) {
                        var select = "." + series.name + "_" + options.xAxis.categories[i] + "_" + kpi;
                        var value = $(select)[0];
                        if (value != null) {
                            if (value.innerHTML.indexOf("%") >= 0)
                                unit = "%";
                            var curValue = parseFloat(value.innerHTML);
                            if (curValue > maxValue)
                                maxValue = curValue;
                            series.data.push(curValue);
                        }
                    }
                    options.series.push(series);
                });
                options.yAxis.max = maxValue;
                options.yAxis.title.text = unit;
                seriesCount = options.series.length;
                if (seriesCount <= 1)
                    options.legend.enabled = false;
                else
                    options.legend.enabled = true;
                var chart = new Highcharts.Chart(options);
            }

            options = {
                chart: {
                    renderTo: 'bargraph',
                    defaultSeriesType: 'column'
                },
                title: {
                    text: '作业组按时完成率'
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: unit,
                        style: {
                            font: 'normal 15px Verdana, sans-serif'
                        }

                    },
                    max: 100
                },
                legend: {
                    enabled: true,
                    layout: 'vertical',
                    backgroundColor: '#FFFFFF',
                    align: 'right',
                    verticalAlign: 'middle',
                    floating: false,
                    shadow: true
                },
                tooltip: {
                    formatter: function () {
                        var msg = this.x + ': ' + this.y + unit;
                        if (seriesCount > 1)
                            msg = '<b>' + this.series.name + '</b><br/>' + msg;
                        return msg;
                    }
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                xAxis: {
            }
        };

        $("#graph").hide();
        $("#list").show();

        AddAllKPI();

        var table = $("#datatable");
        var kpi = $("#allkpi").val();

        Highcharts.visualize(table[0], options, kpi);
    });				
    </script>
</asp:Content>
